<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>form表单</title>
    <link rel="stylesheet" type="text/css" href="lianxi.css"/>
  </head>
  <body>
    <div id="content">
      <h1>表单</h1>
      <form action="" method="post">
        <p>
          <span>用户名：</span>
          <input type="text" id="" value="" class="border" />
          <input type="button" value="检验用户名是否合法" class="pass" />
        </p>
        <p>
          <span>密码：</span>
          <input type="password" name="" class="border" />
        </p>
        <p>
          <span>确认密码：</span>
          <input type="password" name="" class="border" />
        </p>
        <p>
          <span>性别：</span>
          <input type="radio" name="sex" value="男" />男
          <input type="radio" name="sex" value="女" />女
        </p>
        <p>
          <span>爱好：</span>
          <input type="checkbox" name="like" value="篮球" />篮球
          <input type="checkbox" name="like" value="跑步" />跑步
          <input type="checkbox" name="like" value="游泳" />游泳
        </p>
        <p>
          <span>专业：</span>
          <select name="subject" id="sub">
            <option value="1">计算机应用技术</option>
            <option value="2">软件技术</option>
          </select>
        </p>
        <p>
          <span>个人简介：</span>
          <textarea name="" rows="" cols="" id="profile"></textarea>
        </p>
        <p>
          <span>头像：</span>
          <input
            type="file"
            accept="image/gif,image/jpeg,image/jpg,image/png,image/webp"
          />
        </p>
        <div class="button">
          <input type="button" name="" value="提交" class="l20" />
          <input type="button" name="" value="重置" class="l20" />
        </div>
      </form>
    </div>
    <script type="text/javascript">
    	let inputs = document.getElementsByTagName('input');
    	let likes = document.getElementsByName("like");
    	let sex = document.getElementsByName("sex");
    	let obj= document.getElementById("sub");
    	let profile = document.getElementById("profile");
    	inputs[10].onclick=function(){
    		console.log("用户名:"+inputs[0].value);
    		console.log("密码:"+inputs[2].value);
    		console.log("确认密码:"+inputs[3].value);
    		for(var i=0;i<sex.length;i++){
    			if(sex[i].checked){
    				console.log("性别:"+sex[i].value)
    			}
    		}
    		for(var i=0;i<likes.length;i++){
    			if(likes[i].checked){
    				console.log("爱好:"+likes[i].value)
    			}
    		}
    		var txt = obj.options[obj.selectedIndex].text;
    		console.log("专业:"+txt);
    		console.log("个人简介:"+profile.value);
    		console.log(inputs[9].value);
    	}
    </script>
  </body>
</html>